<template>
  <w-alert>
    <w-horizontal class="w-alert-head">
      <w-dialog-move>
        <div class="w-alert-move" w-width="*"><div class="w-alert-title" v-if="title">{{title}}</div></div>
      </w-dialog-move>
      <i class="w-alert-close f-i f-i-close" @click="close"></i>
    </w-horizontal>
    <w-vertical class="w-alert-body">
      <w-horizontal class="w-alert-main">
        <w-img class="w-alert-icon" :src="icon || '.f-i .f-i-warning'"></w-img>
        <slot>
          <div w-width="*" class="w-alert-text" v-html="text"></div>
        </slot>
      </w-horizontal>
      <w-buttonbar :class="['w-alert-buttonbar', {'f-h-gap': dfish.br.compat.gap}]">
        <w-button face="primary" class="w-alert-button" text="确定" @click="save"
          :ownproperty="true"/>
      </w-buttonbar>
    </w-vertical>
  </w-alert>
</template>

<script>
  import $ from '../dfish.js'
  export default {
    props: ['text', 'title', 'icon'],
    methods: {
      save(e) {
        $.dialog(e).cueYes()
      },
      close(e) {
        $.close(e)
      }
    },
    computed: {
      dfish() {
        return $
      }
    },
  }
</script>

<style>

</style>
